$.ajax({
    type: 'GET',
    url: '../mock/index.json',
    data: {},
    success: function (data) {
        // console.log(data);
        var n = localStorage.getItem('indexs');
        // console.log(n);
        var arrss = [];
        arrss = data[0].index;

        // console.log(arrss);
        // for (let i = 0; i < arrss.length; i++) {
        // console.log(data.length);
        // console.log(n);
        // console.log(data[0].index[n].url.length);
        var arr = data[0].index[n].url;
        var strss = '';
        var strsss = '';
        for (let i = 0; i < arr.length; i++) {
            strss = `
                    <img src="${ arr[i] }" alt="" width="398px">
                    <div class="Gui-mask"></div>
            `;
            strsss += `
            <img src="${ arr[i] }"
            alt="" width="58px">
            `
        }

        $('.Gui-smallPicture').html(strss)
        $('.Gui-Carouse-vessel').html(strsss)

        // 榨汁机详情页放大镜
        $('.Gui-smallPicture').mousemove(function (e) {
            // 声明一个sleft,位于盒子左右偏移量 - Gui-smallPicture设置的偏移量 - 蒙版的宽度 / 2 让蒙版在中间
            var sleft = e.pageX - $(this).offset().left - $('.Gui-mask').width() / 2;
            // 声明一个stop,位于盒子上下偏移量 - Gui-smallPicture设置的偏移量 - 蒙版的高度 / 2 让蒙版在中间
            var stop = e.pageY - $(this).offset().top - $('.Gui-mask').height() / 2;
            // 蒙版的越界
            // 如果sleft小于0那么就等于0，不让蒙版超出左边
            if (sleft <= 0) {
                sleft = 0;
                // 让盒子的宽-蒙版的宽小于sleft,那么就等于盒子的宽-蒙版的宽小于sleft,不让他超出距离
            } else if (sleft >= $(".Gui-smallPicture").width() - $(".Gui-mask").width()) {
                sleft = $(".Gui-smallPicture").width() - $(".Gui-mask").width()
            };
            if (stop <= 0) {
                stop = 0;
            } else if (stop >= $(".Gui-smallPicture").height() - $(".Gui-mask").height()) {
                stop = $(".Gui-smallPicture").height() - $(".Gui-mask").height()
            };

            // 蒙版移动
            $('.Gui-mask').css({ 'left': sleft, 'top': stop });

            // 放大镜动
            // 大盒子的子元素的移动值
            $('.Gui-big-box').find('img').css({ 'left': -sleft * 1, 'top': -stop * 1 });
        }).hover(function () {
            // 显示隐藏
            $('.Gui-mask').show();
            $('.Gui-big-box').show();
        }, function () {
            $('.Gui-mask').hide();
            $('.Gui-big-box').hide();
        })
        var flagNext = true;
        $(".Gui-triangle2").click(function () {
            if (flagNext) {
                flagNext = false;
                $(".Gui-triangle2").prop('disabled', false);
                $(".Gui-Carouse-vessel").animate({
                    left: "-=" + 75
                }, function () {
                    if ($(".Gui-Carouse-vessel").position().left <= -210) {
                        $('.Gui-triangle2').prop('disabled', true);
                    };
                    flagNext = true;
                });
            }
        });

        var flagPrev = true;
        $(".Gui-triangle1").click(function () {
            if (flagPrev) {
                flagPrev = false;
                $(".Gui-triangle1").prop('disabled', false);
                $(".Gui-Carouse-vessel").animate({
                    left: "+=" + 75
                }, function () {
                    if ($(".Gui-Carouse-vessel").position().left >= -75) {
                        $(".Gui-triangle1").prop('disabled', true);
                    };
                    flagPrev = true;
                });
            }
        });
        // hover图片
        $('.Gui-Carouse-vessel img').hover(function () {
            // $(this).css('border', '1px solid red');
            var zxc = $(this)[0].src
            $('.Gui-smallPicture img').prop('src', zxc);
            $('.Gui-big-box img').prop('src', zxc);
        }, function () {
            $(this).css('border', '0px solid red')
        })
    }
})


$.ajax({
    type: 'GET',
    url: '../mock/index.json',
    data: {},
    success: function (data) {
        // console.log(data);
        var n = localStorage.getItem('indexs');
        var arrsss = [];
        arrsss = data[0].index;

        // console.log(arrsss);
        var arr123 = data[0].index[n].rz_shop_name;
        var ctaa = '';
        console.log(arr123);
        for (let i = 0; i < 1; i++) {
            ctaa = `
                <a href="" class="Gui-label_url">
                    <img src="https://x.dscmall.cn/storage/data/goods/label/双十二2.png" alt="">
                </a>
                <a href="" class="Gui-label_url">
                    <img src="https://x.dscmall.cn/storage/data/goods/label/商创精选2.png" alt="">
                </a>
                <a href="" class="Gui-label_url">
                    <img src="https://x.dscmall.cn/storage/data/goods/label/放心购2.png" alt="">
                </a>
                <span class="Gui-span11-box">
                    ${ arr123 }
                </span>`;

        }
        $('.Gui-juicer-name').html(ctaa)
    }
})

$.ajax({
    type: 'GET',
    url: '../mock/index.json',
    data: {},
    success: function (data) {
        // console.log(data);
        var n = localStorage.getItem('indexs');
        var arrsss = [];
        arrsss = data[0].index;

        // console.log(arrsss);
        var arr1234 = data[0].index[n].goods_price;
        var ctaaa = '';
        console.log(arr1234);
        for (let i = 0; i < 1; i++) {
            ctaaa = `
            <div class="Gui-summary-item">
                    <span class="Gui-si-tit">商城价</span>
                    <span class="Guisi-warp">
                        <strong class="Gui-shop-price">${ arr1234 }</strong>
                        <div class="Gui-price-notify">降价通知</div>
                        <div class="Gui-si-info">累计评价 <em>4</em></div>
                        <div class="Gui-si-info1">累计销量 <em>2</em></div>
                    </span>
                </div>
                `

        }
        $('.Gui-s-p-w-wrap').html(ctaaa)
    }
})
